﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4-1/s4-1-bg.jpg');
            background-repeat: no-repeat;
            overflow: hidden;
        }
        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }

    </style >
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/world.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
</head>
<body>
    <canvas id="cavans2" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <div id="container" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>
    <img src="./images/s4-1/s4-1-detail.png" style="position: absolute; top:650px; left: 40px;" />
    <!--<img src="./images/s4/s4-right-bg.png" style="position: absolute; top:130px; left: 1500px;" />-->
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script>
        var _cxt = null;
        var g_interval = 30;
        var g_size = { w: 1920, h: 1080 };
        var g_planeArr = [{
            size: { w: 292, h: 152 },
            offset: { x: 136, y: 72 }, url: './images/s4-1/s4-1-bplane-l.png'
        }, {
            size: { w: 279, h: 158 },
            offset: { x: 122, y: 67 }, url: './images/s4-1/s4-1-bplane-r.png'
        }, {
            size: { w: 146, h: 76 },
            offset: { x: 61, y: 34 }, url: './images/s4-1/s4-1-splane-l.png'
        }, {
            size: { w: 140, h: 79 },
            offset: { x: 69, y: 37 }, url: './images/s4-1/s4-1-splane-r.png'
        }];
        var g_nodeArr = [{
            show: false,
            pos: { x: 97, y: 102 },
            offset: { x: 0, y: 0 },
            url: './images/s4-1/s4-1-hl-eur.png'
        }, {
            show:false,
            pos: { x: 400, y: 457 },
            offset: { x: 65, y: 0 },
            url: './images/s4-1/s4-1-timespan-flfk.png'
        }, {
            show: false,
            pos: { x: 1660, y: 701 },
            offset: { x: 65, y: 0 },
            url: './images/s4-1/s4-1-timespan-shangh.png'
        }, {
            show: false,
            pos: { x: 1611, y: 593 },
            offset: { x: 89, y: 0 },
            url: './images/s4-1/s4-1-timespan-tianj.png'
        }, {
            show: false,
            pos: { x: 1556, y: 660 },
            offset: { x: 65, y: 0 },
            url: './images/s4-1/s4-1-timespan-zhengz.png'
        },{
            show: false,
            pos: { x: 1660, y: 701 },
            offset: { x: 79, y: 0 },
            url: './images/s4-1/s4-1-timespan-shangh-arrive.png'
        }, {
            show: false,
            pos: { x: 400, y: 457 },
            offset: { x: 65, y: 0 },
            url: './images/s4-1/s4-1-timespan-flfk-arrive.png'
        }];
        var g_flyAnimation = [{//法兰克福-天津
            plane: 1,
            pos: { x: 395, y: 425 },
            pathIndex: 0,
            targetPathIndex: 1,
            waitingTime: 5000,
            maxWaitingTime: 5000,
            path: [[395, 425], [455, 366], [516, 330], [570, 304], [624, 282], [682, 264],
            [750, 252], [822, 240], [893, 235], [961, 235], [1028, 240], [1093, 247], [1160, 264], [1220, 278],
            [1289, 304], [1350, 332], [1403, 362], [1454, 396], [1504, 436], [1549, 475], [1578, 515], [1611, 558]],
            next: 1,
            nodes: [3],
            readyTime: 5000,
            maxReadyTime: 5000,
            readyNodes: [1],
            isRuning:false
        }, {//天津-上海
            plane: 3,
            pos: { x: 1611, y: 558 },
            pathIndex: 0,
            targetPathIndex: 1,
            waitingTime: 5000,
            maxWaitingTime: 5000,
            path: [[1611, 558], [1631, 582], [1641, 604], [1650, 630], [1661, 669]],
            next: 2,
            nodes: [5],
            readyTime: 0,
            maxReadyTime: 0,
            readyNodes: [],
            isRuning: false
        }, {//上海-郑州
            plane: 2,
            pos: { x: 1661, y: 669 },
            pathIndex: 0,
            targetPathIndex: 1,
            waitingTime: 5000,
            maxWaitingTime: 5000,
            path: [[1661, 669], [1638, 681], [1616, 688], [1590, 685], [1570, 668], [1560, 650], [1552, 625]],
            next: 3,
            nodes: [4],
            readyTime: 5000,
            maxReadyTime:5000,
            readyNodes: [2],
            isRuning: true
        }, {//郑州-法兰克福
            plane: 0,
            pos: { x: 1552, y: 625 },
            pathIndex: 0,
            targetPathIndex: 1,
            waitingTime: 5000,
            maxWaitingTime: 5000,
            path: [[1552, 625], [1510, 659], [1464, 679], [1420, 725], [1374, 751], [1327, 774], [1276, 793],
            [1218, 812], [1161, 827], [1095, 837], [1028, 841], [963, 842], [895, 837], [829, 826], [770, 811], [706, 784],
            [644, 751], [592, 714], [546, 672], [506, 629], [472, 582], [443, 535], [421, 490], [405, 459], [395, 425]],
            next: 0,
            nodes: [0, 6],
            readyTime: 0,
            maxReadyTime: 0,
            readyNodes: [],
            isRuning: false
        }];
        function init() {
            _cxt = document.getElementById('cavans2').getContext("2d");
            for (var index = 0; index < g_planeArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_planeArr[index].url);
                g_planeArr[index].tex2D = image;
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_nodeArr[index].url);
                g_nodeArr[index].tex2D = image;
            }
            window.setInterval(function () {
                Render();
            }, g_interval);
        }

        function Render() {
            _cxt.clearRect(0, 0, g_size.w, g_size.h);


            for (var indexOfNode = 0; indexOfNode < g_nodeArr.length; indexOfNode++) {
                if (g_nodeArr[indexOfNode].show) {
                    _cxt.drawImage(g_nodeArr[indexOfNode].tex2D,
                        g_nodeArr[indexOfNode].pos.x - g_nodeArr[indexOfNode].offset.x,
                        g_nodeArr[indexOfNode].pos.y - g_nodeArr[indexOfNode].offset.y);
                }
            }

            for (var index = 0; index < g_flyAnimation.length; index++) {
                if (g_flyAnimation[index].isRuning == false)
                    continue;

                if (g_flyAnimation[index].readyTime > 0) {
                    g_flyAnimation[index].readyTime -= g_interval;
                    for (var indexOfNode = 0; indexOfNode < g_flyAnimation[index].readyNodes.length; indexOfNode++) {
                        g_nodeArr[g_flyAnimation[index].readyNodes[indexOfNode]].show = true;
                    }
                    continue;
                } else {
                    for (var indexOfNode = 0; indexOfNode < g_flyAnimation[index].readyNodes.length; indexOfNode++) {
                        g_nodeArr[g_flyAnimation[index].readyNodes[indexOfNode]].show = false;
                    }
                }

                if (g_flyAnimation[index].targetPathIndex < g_flyAnimation[index].path.length) {
                    // 还未到达最终目的地
                    if (g_flyAnimation[index].pos.x == g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][0]
                        && g_flyAnimation[index].pos.y == g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][1]) {
                        g_flyAnimation[index].pathIndex++;
                        g_flyAnimation[index].targetPathIndex++;
                    } else {
                        // 移动坐标
                        var deltaX = (g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][0]
                            - g_flyAnimation[index].path[g_flyAnimation[index].pathIndex][0]) / 500 * g_interval;//g_flyAnimation[index].pos.x;
                        var deltaY = (g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][1]
                            - g_flyAnimation[index].path[g_flyAnimation[index].pathIndex][1]) / 500 * g_interval;// - g_flyAnimation[index].pos.y;
                        g_flyAnimation[index].pos.x += deltaX;
                        g_flyAnimation[index].pos.y += deltaY;

                        if ((deltaX >= 0 && g_flyAnimation[index].pos.x > g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][0])
                            || (deltaX < 0 && g_flyAnimation[index].pos.x < g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][0])) {
                            g_flyAnimation[index].pos.x = g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][0];
                        }
                        if ((deltaY >= 0 && g_flyAnimation[index].pos.y > g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][1])
                            || (deltaY < 0 && g_flyAnimation[index].pos.y < g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][1])) {
                            g_flyAnimation[index].pos.y = g_flyAnimation[index].path[g_flyAnimation[index].targetPathIndex][1];
                        }
                    }
                } else {
                    // 到达目的地
                    if (g_flyAnimation[index].waitingTime > 0) {
                        g_flyAnimation[index].waitingTime -= g_interval;
                        // 显示相关node
                        for (var indexOfNode = 0; indexOfNode < g_flyAnimation[index].nodes.length; indexOfNode++) {
                            g_nodeArr[g_flyAnimation[index].nodes[indexOfNode]].show = true;
                        }
                    } else {
                        for (var indexOfNode = 0; indexOfNode < g_flyAnimation[index].nodes.length; indexOfNode++) {
                            g_nodeArr[g_flyAnimation[index].nodes[indexOfNode]].show = false;
                        }
                        g_flyAnimation[index].isRuning = false;
                        // 启动下一班
                        var next = g_flyAnimation[index].next;
                        // 重新飞行
                        g_flyAnimation[next].pathIndex = 0;
                        g_flyAnimation[next].targetPathIndex = 1;
                        g_flyAnimation[next].waitingTime = g_flyAnimation[next].maxWaitingTime;
                        g_flyAnimation[next].readyTime = g_flyAnimation[next].maxReadyTime;
                        g_flyAnimation[next].pos.x = g_flyAnimation[next].path[g_flyAnimation[next].pathIndex][0];
                        g_flyAnimation[next].pos.y = g_flyAnimation[next].path[g_flyAnimation[next].pathIndex][1];
                        g_flyAnimation[next].isRuning = true;
                    }
                }
                _cxt.drawImage(g_planeArr[g_flyAnimation[index].plane].tex2D,
                    g_flyAnimation[index].pos.x - g_planeArr[g_flyAnimation[index].plane].offset.x,
                    g_flyAnimation[index].pos.y - g_planeArr[g_flyAnimation[index].plane].offset.y,
                    g_planeArr[g_flyAnimation[index].plane].size.w,
                    g_planeArr[g_flyAnimation[index].plane].size.h);
            }

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#FFF';
            _cxt.font = '40px Arial';
            var timeString = getNowFormatYYMMDDHHMM();
            var timeLength = _cxt.measureText(timeString);
            _cxt.fillText(timeString, 1920 - timeLength.width - 50, 40);

           
        }

        function getNowFormatYYMMDDHHMM() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var strHour = date.getHours();
            var strMinutes = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 0 && strHour <= 9) {
                strHour = "0" + strHour;
            }
            if (strMinutes >= 0 && strMinutes <= 9) {
                strMinutes = "0" + strMinutes;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + strHour + seperator2 + strMinutes;
            return currentdate;
        }
        init();
    </script>
    <script>
        $(document).ready(function () {
            register();
        });
    </script>
</body>
</html>